<template>
	<view>
		<view class="mine-header" v-if="userStore.userInfo">
			<image :src="userStore.userInfo?.avatar" class="avatar" mode=""></image>
			<view class="right-info">
				<text class="nickname">{{userStore.userInfo?.nickName}}</text>
				<view class="message">欢迎使用香哈菜谱学做菜</view>
			</view>
			<navigator url="/pages/userInfo/userInfo">
				<image src="/static/icons/arrow.png" class="arrow" mode=""></image>
			</navigator>
		</view>

		<view class="mine-header" v-else>
			<image src="/static/default.png" class="avatar" mode=""></image>
			<view class="right-info">
				<button class="login-button nickname" open-type="getPhoneNumber"
					@getphonenumber="onGetPhoneNumber">立即登录</button>
				<view class="message">登录后可收藏喜欢的菜谱</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { loginByPhoneApi } from '../../api/user';
	import { useUserStore } from '../../store/user';

	const userStore = useUserStore();



	function onGetPhoneNumber(event) {
		uni.login({
			success(res) {
				loginByPhoneApi({
					iv: event.detail.iv,
					encryptedData: event.detail.encryptedData,
					code: res.code,
					appId: 'wx87cf68512d5e10a0',
					appSecret: '7618e9b5b960b9298ed428f982cc416a'
				}).then(res => {
					if (res.code == 200) {
						// 保存token
						uni.setStorageSync('user_token', res.token);

						// 发请求获取用户信息
						userStore.getUserInfoAction();

					}
				})

			}
		})
	}
</script>

<style scoped>
	.mine-header {
		display: flex;
		align-items: center;
		margin: 30rpx;
	}

	.avatar {
		width: 116rpx;
		height: 116rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}
	
	.right-info {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}
	
	.arrow {
		height: 40rpx;
		width: 30rpx;
	}

	.nickname {
		height: 42rpx;
		line-height: 42rpx;
		color: #515151;
		font-size: 30rpx;
	}

	.login-button {
		background-color: transparent;
		width: 150rpx;
		text-align: left;
		padding: 0;
		margin: 0;
	}

	.login-button::after {
		border: none;
	}

	.message {
		height: 32rpx;
		font-size: 22rpx;
		line-height: 32rpx;
		color: #d1d1d1;
	}
</style>